<template>
  <section class="custom-table">
    <el-table
      class="basic-table"
      v-loading="mainTableLoading"
      :data="tableData"
      fit
      highlight-current-row
      style="width: 100%;"
      :height="height"

      :max-height="maxHeight"
      :row-key="rowKey"
      max-height="666"
      @selection-change="handleSelectionChange"
      @sort-change="({ column, prop, order }) => sortChange({ column, prop, order })"
    >
      <el-table-column
        v-if="showSelection"
        type="selection"
        :reserve-selection="reserveSelection"
        align="center"
      />
      <el-table-column v-if="showIndex" align="center" width="60" label="序号">
        <template slot-scope="scope">
          <div class="title-box">
            <span>{{ scope.$index + (pageNo - 1) * pageSize + 1 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :show-overflow-tooltip="(item.showOverflowTooltip === false || item.showOverflowTooltip === true) ? item.showOverflowTooltip : showOverflowTooltip"
        :align="item.align || align || 'center'"
        :label="item.label"
        :width="item.width"
        :sortable="item.sortable"
        :prop="item.props"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" :name="item.slot" :data="{row: scope.row, index: scope.$index}" />
          <span v-else>{{ scope.row[item.props] }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showOperations" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <slot :row="scope.row" />
        </template>
      </el-table-column>

      <slot />
    </el-table>
    <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="handleChangePage" />
  </section>
</template>

<script>
import Pagination from '@/views/components/Pagination'

export default {
  name: 'Index',
  components: {
    Pagination
  },
  props: [
    'tableConfig',
    'tableData',
    'total',
    'pageNo',
    'pageSize',
    'mainTableLoading',
    'height',
    'maxHeight',
    'reserveSelection',
    'rowKey'
  ],
  computed: {
    tableColumns() {
      return this.tableConfig.colums
    },
    tableThead() {
      return this.tableConfig.tableThead
    },
    showSelection() {
      return this.tableConfig.showSelection
    },
    showIndex() {
      return this.tableConfig.showIndex
    },
    showSerialNumber() {
      return this.tableConfig.showSerialNumber
    },
    showOperations() {
      return this.tableConfig.showOperations
    },
    showOverflowTooltip() {
      return this.tableConfig.showOverflowTooltip === false ? false : true
    },
    align() {
      return this.tableConfig.align
    },
    // page() {
    //   return this.pageNo;
    // },
    // limit() {
    //   return this.pageSize;
    // },
    page: {
      get() {
        return this.pageNo
      },
      set() {}
    },
    limit: {
      get() {
        return this.pageSize
      },
      set() {}
    }
  },
  created() {

  },
  methods: {
    getIndex(scope) {
      const page = this.pageNo
      const limit = this.pageSize
      return scope.$index + (page - 1) * limit + 1
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleChangePage({ pageNo, pageSize }) {
      this.$emit('handleChangePage', { pageNo, pageSize })
    },
    sortChange({ column, prop, order }) {
      const sortType = {
        ascending: 'asc',
        descending: 'desc'
      }
      if (order === null) {
        this.$emit('sortChange', null)
        return
      }
      let field = prop
      if (prop && prop.indexOf('TimeStr') > -1) {
        field = prop.split('Str')[0]
      }
      const sortingFields = {
        field,
        order: sortType[order]
      }
      this.$emit('sortChange', [sortingFields])
    }
  }
}
</script>
